<template>
  <Card shadow>
    <lab-applied-summary-sheet ref="labAppliedSummarySheet" />
  </Card>
</template>

<script>
import LabAppliedSummarySheet from '_c/lab-applied-summary-sheet/lab-applied-summary-sheet'
import { on, off } from '@/libs/tools'
export default {
  name: 'summary_sheet',
  components: {
    'lab-applied-summary-sheet': LabAppliedSummarySheet
  },
  data () {
    return {
      firstEnter: false
    }
  },
  methods: {
    resizeSubComponents () {
      this.$children[0].$el.children[0].style.minHeight = this.$parent.$el.clientHeight - 36 + 'px'
      this.$refs.labAppliedSummarySheet.table.height = this.$el.clientHeight - 188
    }
  },
  created () {
    this.firstEnter = true
  },
  mounted () {
    this.$nextTick(() => {
      this.resizeSubComponents()
      on(window, 'resize', this.resizeSubComponents)
    })
  },
  activated () {
    if (!this.firstEnter) {
      this.resizeSubComponents()
      on(window, 'resize', this.resizeSubComponents)
    }
  },
  deactivated () {
    off(window, 'resize', this.resizeSubComponents)
  },
  beforeDestroy () {
    off(window, 'resize', this.resizeSubComponents)
  }
}
</script>

<style lang="less" scoped>
  @import "lab-applied-summary-sheet.less";
</style>
